<!-- 采用html5  -->
<!DOCTYPE html>
<html>

<head>


    <meta charset="UTF-8">

    <!-- 页面显示适应移动设备 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>我的APP</title>

    <link rel="stylesheet" href="resources\we-vue\style.css">
    <link rel="stylesheet" href="resources\css\font-awesome.min.css">
    <link rel="stylesheet" href="resources\css\hui.css">

    <style>
        /*元素选择器*/

        html {
            height: 100%;
        }

        body {
            height: 100%;
            padding: 0px;
            /*内边距*/
            margin: 0px;
            /*外边距*/
        }

        .my-container {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: #f0f0f0;
        }
    </style>

   

</head>


<body>

    <div id="app" lass="my-container">
        
    
    <header class="hui-header">
            <div id="hui-back"></div>
            <h1>HUI </h1>
        </header>
        <div class="hui-wrap">
            <div class="hui-common-title" style="margin-top:15px;">
                <div class="hui-common-title-line"></div>
                <div class="hui-common-title-txt">普通滑块</div>
                <div class="hui-common-title-line"></div>
            </div>
            <div style="padding:0px 25px;">
                <div style="line-height:30px; padding-bottom:8px;" id="showValue">滑块值 : 20</div>
                <div class="hui-range">
                    <input type="range" name="" id="range1" min="0" max="100" value="50" />
                </div>
            </div>
            <div class="hui-common-title" style="margin-top:35px;">
                <div class="hui-common-title-line"></div>
                <div class="hui-common-title-txt">刻度滑块</div>
                <div class="hui-common-title-line"></div>
            </div>
            <div style="padding:0px 25px;">
                <div style="line-height:30px; padding-bottom:8px;" id="showValue2">您的身高 : 120cm</div>
                <div class="hui-range">
                    <input type="range" name="" id="range2" min="100" max="220" value="160" />
                </div>
                <div class="hui-range-ruling"></div>
                <div class="hui-range-ruling-txt">
                    <div>100</div>
                    <div>220</div>
                </div>
            </div>
            <div class="hui-common-title" style="margin-top:35px;">
                <div class="hui-common-title-line"></div>
                <div class="hui-common-title-txt">组合滑块</div>
                <div class="hui-common-title-line"></div>
            </div>
            <div style="padding:0px 25px;">
                <div style="line-height:30px; padding-bottom:8px;" id="showValue3">价格区间 : 250 - 750</div>
                <!-- 组合滑块区 -->
                <div style="background:#E1E1E1; height:20px; border-radius:2px;">
                    <div style="width:50%; float:left;">
                        <div class="hui-range">
                            <input type="range" name="" id="range3_1" min="0" max="500" value="250" />
                        </div>
                    </div>
                    <div style="width:50%; float:right;">
                        <div class="hui-range">
                            <input type="range" name="" id="range3_2" min="500" max="1000" value="750" />
                        </div>
                    </div>
                </div>
                <div class="hui-range-ruling"></div>
                <div class="hui-range-ruling-txt">
                    <div>0</div>
                    <div>1000</div>
                </div>
            </div>
        </div>
        </div>


</body>

<script src="resources\js\vue.min.js"></script>
<script src="resources\js\jquery.min.js"></script>
<script src="resources\we-vue\index.js"></script>
<script src="resources\layer_mobile\layer.js"></script>
<script src="resources\js\my.js"></script>
<script src="resources\js\hui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
hui('#range1').ranging(function(value){
    hui('#showValue').html('滑块值: '+value);
    
});
hui('#range2').ranging(function(value){
    hui('#showValue2').html('您的身高: '+ value + 'cm');
});
hui('#range3_1').ranging(function(value){
    range2get();
});
hui('#range3_2').ranging(function(value){
    range2get();
});
hui('.hui-range-ruling').rangeRuling();
function range2get(){
    var val1 = hui('#range3_1').val();
    var val2 = hui('#range3_2').val();
    hui('#showValue3').html('价格区间: '+ val1 + ' - ' + val2);
}
</script>

<script>

    new Vue({
        el: '#app',
        data: {
            deps: [],
        },
        methods: {

        },
        mounted() {
            Serv.loadData({ url: '/text.jsp' }, (data) => {
                this.deps = data;
                console.log(this.deps);
            })
        }
    });

</script>

</html>